<template>
    <h2>用户详细信息注册表</h2>
    <table>
        <tr>
            <td>真实姓名</td>
            <td>
                <input type="text" v-model="U_Name" />
            </td>
        </tr>
        <tr>
            <td>身份证号</td>
            <td>
                <input type="text" v-model="U_IdCard" />
            </td>
        </tr>
        <tr>
            <td>用户类型</td>
            <td>
                <select v-model="UT_Id">
                    <option value="0">--请选择--</option>
                    <option v-for="item in opt" :key="item.UT_Id" :value="item.UT_Id">{{ item.UT_Name }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>联系方式</td>
            <td>
                <input type="text" v-model="U_Phone" />
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <input type="date" v-model="U_Date" />
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="Usex" value="false" v-model="U_Sex" />男
                <input type="radio" name="Usex" value="true" v-model="U_Sex" />女
            </td>
        </tr>
        <tr>
            <td>年收入</td>
            <td>
                <input type="text" v-model="U_Income" />
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: :center;">
                <button @click="SaveData">注册</button>
                <button>返回</button>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue'
import asios from 'axios'

//取出地址栏编号(用户编号)
const route = useRoute();
const userId = route.params.Uid;

const opt = ref([{
    UT_Id: '',
    UT_Name: ''
}]);
//onMounted(): 钩子函数 用户初始化加载数据
onMounted(() => {
    asios.get('https://localhost:44305/api/Users/UserTypeShow')
        .then(res => {
            opt.value = res.data;
        })
        .catch(error => {
            console.log(error);
        })
})

const U_Name = ref('');
const U_IdCard = ref('');
const U_Sex = ref(true);
const U_Income = ref('');
const U_Date = ref('');
const U_Phone = ref('');
const UT_Id = ref(0);

//注册事件
const SaveData = () => {
    //向服务器发送请求
    asios.post('https://localhost:44305/api/Users/UserInfoRegister', {
        U_Name: U_Name.value,
        U_IdCard: U_IdCard.value,
        U_Sex: U_Sex.value,
        U_Income: U_Income.value,
        U_Date: U_Date.value,
        U_Phone: U_Phone.value,
        UT_Id: UT_Id.value,
        UL_Id: userId
    })
        .then(res => {
            if (res.data > 0) {
                alert('注册成功');
            }
            else {
                alert('注册失败');
            }
        })
        .catch(error => {
            console.log(error);
        })

}
</script>